<template>
    <LayoutContainer>
        <template #header>
            <Header :runCodeFun="runCodeFun"></Header>
        </template>
        <template #center>
            <Editor :code="currentCode.js" :theme="theme.codeTheme" :getEditor="getEditor"></Editor>
        </template>
        <template #right>
            <component :is="markRaw(currentCode.template)" :code="currentCode.js" :runCode="runCode"></component>
        </template>
        <template #bottom>
            <ExampleList :active="activeFn"></ExampleList>
        </template>
        <template #footer>
            <Footer></Footer>
        </template>
    </LayoutContainer>
</template>

<script setup lang='ts'>
import LayoutContainer from '@/layout/LayoutContainer.vue';
import ExampleList from "@/components/ExampleList.vue";
import Editor from "@/components/Editor.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { onMounted, shallowRef, ref, watch, markRaw } from "vue";
import {

    darkTheme,
} from "naive-ui";
import { helloWord } from "@/examples/helloWord";
import * as monaco from "monaco-editor"
import type { IExamples } from '@/examples/type';
import type { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';

type CodeEditor = monaco.editor.IStandaloneCodeEditor
interface ITheme {
    box: BuiltInGlobalTheme | undefined,
    codeTheme: string,
}
let editor: CodeEditor | null = null;
const currentCode = shallowRef(helloWord);


const active = ref(true);

const activeFn = (data: IExamples) => {
    currentCode.value = data;
    runCodeFun("ADD");
}

const runCode = ref(0);
const runCodeFun = (kType = "UPDATE") => {


    if (kType === "UPDATE") {
        currentCode.value.js = editor?.getValue() || "";
    }
    runCode.value++;
};

const getEditor = (_editor: CodeEditor) => {
    editor = _editor;
};
watch(active, () => {
    if (active.value) {
        theme.value = {
            box: darkTheme,
            codeTheme: "vs-dark",
        };
    } else {
        theme.value = {
            box: undefined,
            codeTheme: "vs",
        };
    }
});

const theme = ref<ITheme>({
    box: darkTheme,
    codeTheme: "vs-dark",
});

onMounted(() => {
    currentCode.value = helloWord
})
</script>
<style scoped lang='scss'></style>
